<template>
  <a-row :class="['p-4', `${prefixCls}--box`]" :gutter="10">
    <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex: 1">
      <a-card :bordered="false" style="height: 100%">
        <DeviceTypeTree @select="onTreeSelect" />
      </a-card>
    </a-col>
    <a-col :xl="18" :lg="16" :md="14" :sm="24" style="flex: 1">
      <a-card :bordered="false" style="height: 100%">
        <DeviceModelTable :data="deviceTypeData" />
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" name="iot-device" setup>
  import { provide, ref } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';

  import DeviceTypeTree from './components/DeviceTypeTree.vue';
  import DeviceModelTable from './components/DeviceModelTable.vue';

  const { prefixCls } = useDesign('device-model');
  provide('prefixCls', prefixCls);

  // 当前选中的设备类型
  const deviceTypeData = ref({});

  // 左侧树选择后触发
  function onTreeSelect(data) {
    deviceTypeData.value = data;
  }
 
</script>

